<template>
  <div  id="login">
    <header class="mui-bar mui-bar-nav">
        <span><img src="login/1.png" @click="back"></span><h1 class="mui-title">注册</h1>
    </header>
    <section>
        <div id="logo">
            <img src="login/3.png" >
            <p>欢迎注册</p>
        </div>
        <div id="email">
            <input type="text" name="" id="" placeholder="用户名" v-model="inputvala"/>
            <input type="password" name="" id="" value="" placeholder="密码" v-model="inputvalb"/>
            <input type="text" placeholder="电话" v-model="inputvalc"/>
            <div id="code">
                <input placeholder="请输入验证码" v-model="inputvald"/>
                <span ref="verificationCode" id="getcode" :class="boola?'yzm':''" style="text-align: center; width:0.7rem; display:block" @click="verificationCode()" :disabled="boola">
                    获取验证码
                </span>
            </div>
        </div>
        
        <button ref="btn" id="sure" @click="request()" :disabled="bool">
            确定注册
        </button>
    </section>
</div>
</template>

<script>
export default {
    methods:{

        back(){
            this.$router.go(-1)
        },

        // 注册{'username': 'jerry',
        //  'password': 'jerry',
        //  'phone': '18321842908',
        //  'code': '9995'}
        
        request(){
            // this.$router.push("/writedata")
            let data = {
                'username': this.inputvala,
                'password': this.inputvalb,
                'phone': this.inputvalc,
                'code': this.inputvald
            }
            this.$store.dispatch("reglink",{url:"http://81.68.226.70:8050/user/regist/","data":data}).then((ok)=>{
                console.log(ok)
            }).catch((err)=>{
                console.log(err)
            })
            console.log(1)
        },
        verificationCode(){
            if(!this.boola){
                this.boola = true

            let i = 60;
            this.$refs.verificationCode.innerHTML = 60
            let time = setInterval(()=>{
                this.$refs.verificationCode.innerHTML = --i
                this.boola=true
                if(i == 0){
                    clearInterval(time)
                    let t=/^\d{11}$/
                    if(t.test(this.inputvala)){
                        this.boola = false
                        this.$refs.verificationCode.style.backgroundColor = "#7285bf"
                    }else{
                        this.$refs.verificationCode.style.backgroundColor = "#ebebeb"
                    }
                    this.$refs.verificationCode.innerHTML = '获取验证码'
                }
            },1000)
            // 获取验证码
            console.log(this.inputvalc)
            this.$store.dispatch("yzmget",{url:"http://81.68.226.70:8050/user/code/?phone="+this.inputvalc}).then(()=>{
                console.log("ok")
            }).catch(()=>{
                console.log("err")
            })
        }
        },
    },
    data(){
        return{
            bool:true,
            boola:true,
            inputvala:"",
            inputvalb:"",
            inputvalc:"", 
            inputvald:"",
            inputvale:"",
        }
    },
    computed: {
	listenData () {
		return this.$store.state.elsem.login
	}
},
    watch:{
        listenData(newval){
            if(newval == true){
                this.$router.replace("/home")
            }
        },
        inputvala(newval){
            let a=/^.{2,10}$/;
            let b=/^.{6,18}$/;
            let c=/^1(3|4|5|6|7|8|9)\d{9}$/;
            let d=/^\d{4}$/;
            if(a.test(newval)&&b.test(this.inputvalb)&&c.test(+this.inputvalc)&&d.test(+this.inputvald)){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        },
        inputvalb(newval){
            let a=/^.{2,10}$/;
            let b=/^.{6,18}$/;
            let c=/^1(3|4|5|6|7|8|9)\d{9}$/;
            let d=/^\d{4}$/;
            if(b.test(newval)&&a.test(this.inputvala)&&c.test(+this.inputvalc)&&d.test(+this.inputvald)){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        },
        inputvalc(newval){
            let a=/^.{2,10}$/;
            let b=/^.{6,18}$/;
            let c=/^1(3|4|5|6|7|8|9)\d{9}$/;
            let d=/^\d{4}$/;
            if(c.test(+newval)){
                this.boola = false
                this.$refs.verificationCode.style.backgroundColor="#7285bf"
            }else{
                this.boola = true
                this.$refs.verificationCode.style.backgroundColor="#f5f5f5"
            }
            if(c.test(+newval) && a.test(this.inputvala) && b.test(this.inputvalb) && d.test(+this.inputvald)){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        },
        inputvald(newval){
            let a=/^.{2,10}$/;
            let b=/^.{6,18}$/;
            let c=/^1(3|4|5|6|7|8|9)\d{9}$/;
            let d=/^\d{4}$/;
            if(d.test(+newval)&&a.test(this.inputvala)&&b.test(this.inputvalb)&&c.test(+this.inputvalc)){
                this.$refs.btn.style.backgroundColor="#7285bf"
                this.bool=false;    
                console.log("成功")
            }else{
                this.$refs.btn.style.backgroundColor="#c8cfeb"
                this.bool=true;
            }
        },
    }
}
</script>
<style>
html,body{
    height: 100%;    
    background-color: #f5f5f5;
}
</style>
<style scoped>
    .yzm{
        cursor: not-allowed;
    }
    #login{
        width: 3.75rem;
        background-color: #f5f5f5;
    }
    header{
    display: flex;
    height: 0.55rem;
    font-size: 0.16rem;
    width: 100%;
    background-color: #f5f5f5;
    padding: 0.12rem 0;
    
    }
    header img{
        height: 0.34rem;
        position: absolute;
    }
    header h1{
        font-size: 0.16rem;
        line-height: 0.34rem;
        margin: auto;
        font-weight: 700;
        height: 0.34rem;
        display: inline;
    }

    #logo{
        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    
    #logo img{
        width: 0.8rem;
        height: 0.8rem;
        border-radius: 50%;
        margin: auto;
        margin-top: 0.4rem;
    }
    #logo p{
        font-size: 0.12rem;
        text-align: center;
        margin: 0.1rem 0;
        font-size: 0.12rem;
        font-weight: 600;
        margin-bottom: 0.2rem;
    }
    #email{
        width: 3.4rem;
        height: 2.4rem;
        margin: auto;
        /* border-radius: 0.03rem; */
        /* background-color: white; */
        display: flex;
        border-radius: 0.15rem;
        flex-direction: column;
        justify-content: center;
        margin-bottom: 0.5rem;
    }
    #email>input{
        width: 3rem;
        height: 0.6rem;
        margin: auto;
        font-size: 0.12rem;
        outline: none;
        border: none;
        text-indent: 0.05rem;
        border-bottom: 1px solid #b3b3b3;
        background-color: #f5f5f5;
    }
    #code{
        width: 3rem;
        height: 0.6rem;
        margin: auto;
        border-bottom: 1px solid #b3b3b3;
        font-size: 0.12rem;
        color: #b3b3b3;
        line-height: 0.6rem;
        display: flex;
        justify-content: space-between;
    }
    #code input{
        width: 75%;
        height: 0.6rem;
        margin: auto;
        font-size: 0.12rem;
        outline: none;
        border: none;
        text-indent: 0.05rem;
        border-bottom: 1px solid #b3b3b3;
        background-color: #f5f5f5;
    }
   
    input::-webkit-input-placeholder{
        color: #b3b3b3;
    }
    
    #sure{
        width: 3.4rem;
        height: 0.41rem;
        margin: auto;
        background-color: #c8cfeb;
        font-size: 0.16rem;
        color: white;
        line-height: 0.41rem;
        border-radius: 0.3rem;
        font-weight: 500;
        border: none;
        outline: none;
        margin: auto;
        display: block;
    }
     
</style>